console.log('shop.js')

//动态加载三级导航
$.ajax({
    type:'get',
    url:webUrl + '/goodsTypeThree/findByGoodsTypeTwoId',
    data:{
        goodsTypeTwoId:GetQueryString('secendId')
    },
    dataType:'json',
    success:function(data){
        console.log(data)
        for(let i=0;i<data.content.length;i++){
            console.log()
                let obj =  `<li class="thirdLev" goodsId='`+data.content[i].goodsTypeThreeId+`'>
                <span>`+data.content[i].goodsTypeThreeName+`</span>
            </li>`
            $('.thirdLevBox').append(obj)
        }
        console.log(data)
        $('.thirdLev').eq(0).click()
    }
})
var goodsId,pageIndex=1,goodsNum=3,totalPages; // 定义三级导航id，当前页码，每页显示的商品数量，总页数
// 点击三级导航
$(document).on('click','.thirdLev',function () {
    goodsId = $(this).attr('goodsId');

    $(this).addClass('active').siblings().removeClass('active');
    $.ajax({
        type:'get',
        url:webUrl + '/goods/pagebygoodstypeid',
        data:{
            goodsTypeId:goodsId,
            pageIndex:pageIndex,
            pageSize:goodsNum
        },
        dataType:'json',
        success:function (data) {
            totalPages = data.content.totalPages;
            let DataJson = data.content.content;
            if(DataJson.length==0){
                alert('暂无商品信息')
                return false;
            }
            $('.goodsBox').html('');

            for (let i=0;i<DataJson.length;i++) {
                let goodsOptions = `<div class="col-lg-4 col-sm-6">
											<div class="product-box">
												<div class="imagebox">
                                                            <div class="box-image owl-carousel-1">
                                                                <a href="goodsInfo.html?goodsId=`+DataJson[i].goodsId+`" title="">
                                                                    <img src="`+DataJson[i].productPicture+`" alt="">
                                                                </a>
                                                            </div>
                                                            <div class="box-content">
                                                                <div class="cat-name">
                                                                    <a href="#" title="">`+DataJson[i].brandName+`</a>
                                                                </div>
                                                                <div class="product-name">
                                                                    <a href="#" title="">`+DataJson[i].commodityName+`</a>
                                                                </div>
                                                                <div class="price">
                                                                    
                                                                    <span class="sale">$`+DataJson[i].concessionalRate+`</span>
                                                                    <span class="regular">$`+DataJson[i].price+`</span>
                                                                </div>
                                                            </div>												
												</div>
											</div>
										</div>`
                $('.goodsBox').append(goodsOptions)
            }
            $('.pageNumBox').html('');
            for(let j=1;j<data.content.totalPages+1;j++){
                let pageNum = `<li><a  class="waves-effect" title="">`+j+`</a></li>`
                $('.pageNumBox').append(pageNum)
            }
            $('.pageNumBox li').eq(0).addClass('active')
        }
    })
})
//点击页码
$(document).on('click','.pageNumBox li',function(){
    console.log($(this).index())
    pageIndex = $(this).index()+1;
    $(this).addClass('active').siblings().removeClass('active')
    addGoods(pageIndex)
})

// 点击下一页
$('.next').click(function(){
    if(pageIndex<totalPages){
        pageIndex++;
        console.log(pageIndex)
        $('.pageNumBox li').eq(pageIndex-1).addClass('active').siblings().removeClass('active')
        addGoods(pageIndex)
    }else{
        alert('已经到最后一页了')
        return false
    }
})
// 点击上一页
$('.prev').click(function(){
    if(pageIndex-1>0){
        pageIndex--;
        $('.pageNumBox li').eq(pageIndex-1).addClass('active').siblings().removeClass('active')
        addGoods(pageIndex)
    }else{
        alert('已经是第一页了')
        return false
    }

})

// 加载商品
function addGoods(pageIndex){
    $.ajax({
        type:'get',
        url:webUrl + '/goods/pagingQuery',
        data:{
            goodsTypeId:goodsId,
            pageIndex:pageIndex,
            pageSize:goodsNum
        },
        dataType:'json',
        success:function (data) {
            console.log(data.content.content)
            let DataJson = data.content.content;
            $('.goodsBox').html('');
            for (let i=0;i<DataJson.length;i++) {
                let goodsOptions = `<div class="col-lg-4 col-sm-6">
											<div class="product-box">
												<div class="imagebox">
                                                            <div class="box-image owl-carousel-1">
                                                                <a href="goodsInfo.html?goodsId="`+DataJson[i].goodsTypeId+` title="">
                                                                    <img src="http://img04.hc360.com/plas/201309/201309220936561258.jpg" alt="">
                                                                </a>
                                                            </div>
                                                            <div class="box-content">
                                                                <div class="cat-name">
                                                                    <a href="#" title="">`+DataJson[i].goodsName+`</a>
                                                                </div>
                                                                <div class="product-name">
                                                                    <a href="#" title="">`+DataJson[i].goodsName+`</a>
                                                                </div>
                                                                <div class="price">
                                                                    
                                                                    <span class="sale">$`+DataJson[i].goodsPrice+`</span>
                                                                    <span class="regular">$2,009.00</span>
                                                                </div>
                                                            </div>												
												</div>
											</div>
										</div>`
                $('.goodsBox').append(goodsOptions)
            }
        }
    })
}
